<template>
  <div class="main_table">
    <el-table
      ref="MainTable"
      v-loading="loading"
      :data="tableData"
      element-loading-text="加载中"
      fit
      border
      highlight-current-row
      :header-cell-class-name="this.$verticaline"
      :header-cell-style="tableHeightStyle"
      @header-dragend="changeTableWidth"
      v-on="$listeners"
      v-bind="$attrs"
    >
      <slot name="customLeft"></slot>
      <el-table-column type="selection" align="center" v-if="showSelection" />
      <template v-for="(item, index) in columns">
        <template v-if="fieidList.includes(item.field) || !fieidList.length">
          <el-table-column
            :key="item.label + index"
            :label="item.label"
            :prop="item.prop"
            :width="computedColumnWidth(item)"
            :sortable="item.sort"
            :fixed="item.fixed"
            :align="item.align || 'left'"
            :class-name="item.class"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :render-header="item.renderHeader"
          >
            <template slot-scope="{row,$index}">
              <slot v-if="item.slot" :name="item.prop" :row="row" :tableIndex="$index"></slot>  
              <span v-else>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </template>
      <slot></slot>
    </el-table>
  </div>
</template>
<script>
import { mixins } from "@/mixins/index.js";
export default {
  mixins: [ mixins ],
  name: "MainTable",
  props: {
    columns: {    //  表头
      type: Array,
      required: true
    },
    tableData: {    //  表格数据
      type: Array,
      required: true
    },
    showSelection: {  //  是否开启选择框
      type: Boolean,
      default: false
    },
    loading: {    //  数据加载loading
      type: Boolean,
      default: false
    },
    fieidList: {  //  是否开启表头设置功能
      type: Array,
      default: () => []
    },
    enableHeaderDrag: {    //  是否使用拖动缓存表格宽度
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      tableHeightStyle: { background: "#f6f8f9", color: "#333333" }, // 表头颜色 
      hash: window.location.hash,  // 页面路径
      tableWidth: JSON.parse(localStorage.getItem('tableWidth')) || {}, // 表格的宽度
    };
  },
  methods: {
    tableRef() {
      return this.$refs.MainTable;
    },
    getScroll() {
      return this.$refs.MainTable.bodyWrapper;
    },
    computedColumnWidth(item) {
      // 如果启用表头拖动，优先使用已计算的宽度，否则使用默认宽度
      if (this.enableHeaderDrag) {
        return this.tableWidth[this.hash + item.prop] || item.width || 100;
      }
      return item.width || 'auto';
    },
    // 处理表格列宽度修改
    changeTableWidth(newWidth, oldWidth, column, event) {
      if(!this.enableHeaderDrag) return;
      let key = this.hash + column.property; // 保存的key
      let tableWidth = Object.assign(this.tableWidth, { [key]: newWidth })
      localStorage.setItem('tableWidth', JSON.stringify(tableWidth))
      for (const refName in this.$refs) {
        const ref = this.$refs[refName];
        // 判断是否是table实例
        if (ref && ref.doLayout) {
          ref.doLayout();
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>